import { defineStore } from 'pinia'
import { getItem, setItem } from '@/utils/storage'
import { LANG, THEME } from '@/constant'
import { useChangeColor } from '@/utils/theme'
const { getLightColor, getDarkColor } = useChangeColor()

export const useSysStore = defineStore('sys', {
  state: () => ({
    lang: getItem(LANG) || 'zh', // 国际化
    isCollapse: false, //左侧菜单折叠展开按钮
    // themeColor: getItem(THEME) || '#409eff', // 国际化, //主题色
    themeColor: '#409eff', // 国际化, //主题色
  }),
  actions: {
    changeLang(value) {
      setItem(LANG, value)
      this.lang = value
    },
    changeIsCollapse() {
      this.isCollapse = !this.isCollapse
    },
    changeThemeColor(value) {
      setItem(THEME, value)
      this.themeColor = value
      this.initTheme()
    },
    initTheme() {
      document.documentElement.style.setProperty(`--el-color-primary`, this.themeColor)

      // 颜色加深或变浅
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(
          `--el-color-primary-light-${i}`,
          getLightColor(this.themeColor, i / 10),
        )
        document.documentElement.style.setProperty(
          `--el-color-primary-dark-${i}`,
          getDarkColor(this.themeColor, i / 10),
        )
      }
    },
  },
})
